<template>
  <div>
    <h1>动态组件切换栏</h1>
    <button @click="tab = 'DongYi'">三角洲行动</button>
    <button @click="tab = 'DongEr'">英雄联盟</button>
    <button @click="tab = 'DongSan'">NBA</button>
    <component :is="tab"></component>
  </div>
</template>

<script>
import DongYi from "@/components/DongYi.vue";
import DongEr from "@/components/DongEr.vue";
import DongSan from "@/components/DongSan.vue";
export default {
  components: {
    DongYi,
    DongEr,
    DongSan,
  },
  name: "DongTai",
  data() {
    return {
      tab: "DongYi",
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang='less' scoped>
</style>